import "./index.less";
import {Fetch, Config} from  '../../libs/';
import {Url, md5Url} from  '../../libs/Url';
import {connect} from 'react-redux';
import {fetch} from  '../../stores/action';
import Animate from 'rc-animate';
import {parseSearch} from  '../../libs/utils';

class Schedule extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 1,
            photo: 1,
            data: {
                list: {
                    timetable: []
                }
            },
            loaded: false
        }
    }

    componentDidMount() {
        let clientInfo = parseSearch();
        if (clientInfo && clientInfo.clientid) {
            Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                .then((res)=> {
                    if (res['class'] && res['class'].classid) {
                        clientInfo['class'] = res['class'];
                        clientInfo['school'] = res['school'];
                        clientInfo['device'] = res['device'];
                        clientInfo['classroom'] = res['classroom'];
                        Fetch(Url.SCHEDULE, {
                            body: {
                                classid: res['class'].classid
                            }
                        })
                            .then(res=> {
                                this.setState({
                                    data: res,
                                    loaded: true
                                })
                            })
                            .catch(e=> {
                                console.log(e)
                            });
                    } else {
                        alert('设备码没有跟班级对应，请核验!')
                    }
                })
                .catch(e=> {
                    console.log(e)
                })
        } else {
            alert('设备码不合法，请核验!')
        }
    }

    render() {
        const self = this;
        const schedule = self.state.data.list.timetable;
        const state = this.state;
        return (
            <div className="schedule clearfix" style={{}}>
                <div
                    onClick={()=> {
                        this.setState({
                            loaded: !state.loaded
                        })
                    }}
                    className="panel-item panel1 container-border"
                    style={{
                        background: 'url(' + require('../../imgs/schedule/course_bg.png') + ')',
                        backgroundSize: '100% 100%'
                    }}
                >
                    <div>
                        <div style={{position: 'relative'}}>
                            <Animate
                                component=""
                                transitionName="fade"
                            >
                                {
                                    state.loaded ? null :
                                        <img draggable="false" key="1" src={require('../../imgs/schedule/course_bg.png')} alt=""
                                             style={{
                                                 width: '100%',
                                                 height: '100%',
                                                 position: 'absolute',
                                                 top: 0,
                                                 right: 0,
                                                 bottom: 0, left: 0
                                             }}/>
                                }
                            </Animate>
                            <table>
                                <tbody>
                                <tr>
                                    <td colSpan="2"></td>
                                    <td>周一</td>
                                    <td>周二</td>
                                    <td>周三</td>
                                    <td>周四</td>
                                    <td>周五</td>
                                    <td>周六</td>
                                    <td>周日</td>
                                </tr>
                                {
                                    schedule.map((item, index)=> {
                                        return <tr key={index}>
                                            {_.range(0, 9).map((key)=> {
                                                if ((index == 0 || index == 4)) {
                                                    if (key == 0)
                                                        return <td key={key}
                                                                   rowSpan={index == 0 ? 4 : 3}>
                                                            {index == 0 ? '上' : '下'}<br/>午
                                                        </td>;
                                                    if (key == 1) {
                                                        return <td key={key} style={{color: '#adb17e'}}>
                                                            第{Config.NUM_EN_CN[index + 1].cn}节</td>
                                                    } else {
                                                        return <td key={key}>
                                                            {item[Config.NUM_EN_CN[key - 1].en + 'text'] }</td>
                                                    }
                                                } else {
                                                    if (key == 0)
                                                        return null;
                                                    if (key == 1)
                                                        return <td key={key}>
                                                            第{Config.NUM_EN_CN[index + 1].cn}节</td>
                                                    if (key > 1) {
                                                        return <td key={key}>
                                                            {item[Config.NUM_EN_CN[key].en + 'text'] }</td>
                                                    }
                                                }
                                            })}
                                        </tr>
                                    })
                                }
                                </tbody>
                            </table>


                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const select = state => {
    return {
        clientInfo: state.clientInfo,
        [md5Url.SCHEDULE]: state.fetchBySubject[md5Url.SCHEDULE]
    }
};

export default connect(select)(Schedule)